<template>
	<view class="style-template-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="navbar-title">AI合照</text>
				<view class="placeholder"></view>
			</view>
		</view>

		<!-- 筛选按钮区域 -->
		<view class="filter-section">
			<view 
				class="filter-btn"
				:class="{ active: activeFilter === filter.key }"
				v-for="filter in filters"
				:key="filter.key"
				@click="switchFilter(filter.key)"
			>
				<text class="filter-text">{{ filter.name }}</text>
				<text class="filter-arrow" v-if="filter.hasDropdown">▼</text>
			</view>
		</view>

		<!-- 模板网格展示 -->
		<view class="template-grid">
			<view 
				class="template-item"
				v-for="(template, index) in displayTemplates"
				:key="template.id"
				@click="selectTemplate(template)"
			>
				<view class="template-image-wrapper">
					<image 
						:src="template.image" 
						mode="aspectFill" 
						class="template-image"
					></image>
					
					<!-- 模板信息覆盖层 -->
					<view class="template-overlay">
						<view class="template-info">
							<text class="template-title">{{ template.title }}</text>
							<text class="template-author">{{ template.author }}</text>
						</view>
						
						<!-- 状态指示器 -->
						<view class="status-section">
							<view class="status-indicator" :class="template.status"></view>
							<text class="status-number">{{ template.points }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部AI合照功能入口 -->
		<view class="ai-photo-entry" @click="enterAIPhoto">
			<view class="ai-entry-card">
				<view class="ai-entry-content">
					<text class="ai-entry-title">开始AI合照</text>
					<text class="ai-entry-subtitle">上传照片，生成专属合照</text>
				</view>
				<view class="ai-entry-arrow">
					<text>›</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeFilter: 'hot',
			filters: [
				{ key: 'hot', name: '最热', hasDropdown: true },
				{ key: 'romantic', name: '浪漫', hasDropdown: true },
				{ key: 'style', name: '风格', hasDropdown: true },
				{ key: 'scene', name: '场景', hasDropdown: true }
			],
			templates: [
				{
					id: 1,
					title: '浪漫夜景合照',
					author: '驴小拍',
					image: '/static/images/lvpai/1611754111193_.pic_hd.jpg',
					status: 'available',
					points: 10,
					category: 'group',
					gender: 'both',
					peopleCount: 2
				},
				{
					id: 2,
					title: '和风浴衣合照',
					author: '驴小拍',
					image: '/static/images/lvpai/1431754111170_.pic_hd.jpg',
					status: 'available',
					points: 10,
					category: 'group',
					gender: 'both',
					peopleCount: 2
				},
				{
					id: 3,
					title: '车内温馨合照',
					author: '驴小拍',
					image: '/static/images/lvpai/1421754111168_.pic_hd.jpg',
					status: 'available',
					points: 10,
					category: 'group',
					gender: 'both',
					peopleCount: 2
				}
			]
		}
	},
	computed: {
		displayTemplates() {
			// 根据当前筛选条件返回模板
			return this.templates;
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		switchFilter(filterKey) {
			this.activeFilter = filterKey;
			// 这里可以添加筛选逻辑
			console.log('切换筛选条件:', filterKey);
		},
		
		selectTemplate(template) {
			console.log('选择模板:', template);
			// 添加触觉反馈
			uni.vibrateShort({
				type: 'light'
			});
			
			// 可以导航到详情页或进行其他操作
			uni.showToast({
				title: `选择了${template.title}`,
				icon: 'none'
			});
		},
		
		enterAIPhoto() {
			// 进入AI合照功能
			uni.vibrateShort({
				type: 'light'
			});
			
			// 导航到AI合照生成页面
			uni.showToast({
				title: '进入AI合照功能',
				icon: 'none'
			});
			
			// 可以导航到具体的AI合照生成页面
			// uni.navigateTo({
			//     url: '/pages/aiphoto/generate/index'
			// });
		}
	}
}
</script>

<style scoped>
.style-template-container {
	width: 100%;
	min-height: 100vh;
	background-color: #1a1a1a;
	color: #ffffff;
}

/* 自定义导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #1a1a1a;
	padding-top: var(--status-bar-height, 44rpx);
}

.navbar-content {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 48rpx;
	color: #ffffff;
	font-weight: 300;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #ffffff;
}

.placeholder {
	width: 60rpx;
}

/* 筛选按钮区域 */
.filter-section {
	margin-top: calc(88rpx + var(--status-bar-height, 44rpx));
	padding: 40rpx 60rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.filter-btn {
	background-color: #2a2a2a;
	border-radius: 40rpx;
	padding: 20rpx 32rpx;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
}

.filter-btn.active {
	background-color: #3a3a3a;
	border-color: #4a4a4a;
}

.filter-text {
	font-size: 28rpx;
	color: #ffffff;
	margin-right: 8rpx;
}

.filter-arrow {
	font-size: 20rpx;
	color: #888888;
}

/* 模板网格 */
.template-grid {
	padding: 0 30rpx 40rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.template-item {
	width: 48%;
	margin-bottom: 30rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #2a2a2a;
	transition: transform 0.3s ease;
}

.template-item:active {
	transform: scale(0.98);
}

.template-image-wrapper {
	position: relative;
	width: 100%;
	height: 400rpx;
}

.template-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 模板信息覆盖层 */
.template-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 100%);
	padding: 40rpx 20rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.template-info {
	flex: 1;
}

.template-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #ffffff;
	display: block;
	margin-bottom: 8rpx;
	line-height: 1.2;
}

.template-author {
	font-size: 24rpx;
	color: #cccccc;
	opacity: 0.8;
}

/* 状态区域 */
.status-section {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.status-indicator {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	margin-bottom: 8rpx;
}

.status-indicator.available {
	background-color: #00ff88;
	box-shadow: 0 0 16rpx rgba(0, 255, 136, 0.6);
}

.status-number {
	font-size: 28rpx;
	font-weight: 700;
	color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 600rpx) {
	.filter-section {
		padding: 40rpx 30rpx 30rpx;
	}
	
	.filter-btn {
		padding: 16rpx 24rpx;
	}
	
	.filter-text {
		font-size: 26rpx;
	}
}

/* AI写真入口样式 */
.ai-photo-entry {
	padding: 0 30rpx 40rpx;
	position: relative;
	z-index: 10;
}

.ai-entry-card {
	background: linear-gradient(135deg, #FF6B9D 0%, #FF8E8E 100%);
	border-radius: 20rpx;
	padding: 32rpx 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 8rpx 32rpx rgba(255, 107, 157, 0.3);
	transition: transform 0.3s ease;
}

.ai-entry-card:active {
	transform: scale(0.98);
}

.ai-entry-content {
	flex: 1;
}

.ai-entry-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #ffffff;
	display: block;
	margin-bottom: 8rpx;
}

.ai-entry-subtitle {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 400;
}

.ai-entry-arrow {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ai-entry-arrow text {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: 300;
}

/* 安全区域适配 */
@supports (bottom: env(safe-area-inset-bottom)) {
	.ai-photo-entry {
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}
}
</style>
